<template>
    <view class="container">
        <van-cell-group title="退款明细">
            <van-cell :value="statusColumns[aftersale.status]" title="售后状态" required />
            <van-cell :value="aftersale.addTime" title="申请时间" required />
            <van-cell :value="aftersale.aftersaleSn" title="服务编号" required />
            <van-cell :value="typeColumns[aftersale.type]" title="退款类型" required />
            <van-cell :value="aftersale.reason" title="退款原因" required />
            <van-cell title="退款金额" :value="'￥' + aftersale.amount + '元'" label="即订单实付- 运费" required />
            <van-field label="退款说明" :value="aftersale.comment" type="textarea" autosize disabled />
            <van-cell title="上传凭证">
                <van-uploader :file-list="fileList" disabled :deletable="false" max-count="0" preview-size="50px" />
            </van-cell>
        </van-cell-group>

        <view class="order-goods">
            <view class="h">退款商品</view>
            <view class="goods">
                <view class="item" v-for="(item, index) in orderGoods" :key="item.id">
                    <view class="img">
                        <image :src="item.picUrl"></image>
                    </view>

                    <view class="info">
                        <view class="t">
                            <text class="name">{{ item.goodsName }}</text>
                            <text class="number">x{{ item.number }}</text>
                        </view>
                        <view class="attr">{{ item.specifications }}</view>
                        <view class="price">￥{{ item.price }}</view>
                    </view>
                </view>
            </view>
        </view>

        <van-cell-group title="订单明细">
            <van-cell title="商品总价" :value="' ￥' + order.goodsPrice + '元'" />
            <van-cell title="    运费" :value="' ￥' + order.freightPrice + '元'" />
            <van-cell title="    优惠" :value="'-￥' + order.couponPrice + '元'" />
            <van-cell title="订单实付" :value="' ￥' + order.actualPrice + '元'" />
        </van-cell-group>
    </view>
</template>

<script>
var util = require('../../../utils/util.js');

var api = require('../../../config/api.js');

export default {
    data() {
        return {
            orderId: 0,
            order: {
                goodsPrice: '',
                freightPrice: '',
                couponPrice: '',
                actualPrice: ''
            },
            orderGoods: [],
            aftersale: {
                status: '',
                addTime: '',
                aftersaleSn: '',
                type: '',
                reason: '',
                amount: '',
                comment: ''
            },
            statusColumns: ['未申请', '已申请，待审核', '审核通过，待退款', '退款成功', '审核不通过，已拒绝'],
            typeColumns: ['未收货退款', '不退货退款', '退货退款'],
            fileList: []
        };
    },
    onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
        this.setData({
            orderId: options.id
        });
        this.getAftersaleDetail();
    },
    onReady: function () {
        // 页面渲染完成
    },
    onShow: function () {
        // 页面显示
    },
    onHide: function () {
        // 页面隐藏
    },
    onUnload: function () {
        // 页面关闭
    },
    methods: {
        getAftersaleDetail: function () {
            uni.showLoading({
                title: '加载中'
            });
            setTimeout(function () {
                uni.hideLoading();
            }, 2000);
            let that = this;
            util.request(api.AftersaleDetail, {
                orderId: that.orderId
            }).then(function (res) {
                if (res.errno === 0) {
                    let _fileList = [];
                    res.data.aftersale.pictures.forEach(function (v) {
                        _fileList.push({
                            url: v
                        });
                    });
                    that.setData({
                        order: res.data.order,
                        orderGoods: res.data.orderGoods,
                        aftersale: res.data.aftersale,
                        fileList: _fileList
                    });
                }

                uni.hideLoading();
            });
        }
    }
};
</script>
<style>
@import './aftersaleDetail.css';
</style>
